<template>
  <div v-loading="loading">
    <el-row :gutter="12">
      <el-col :span="16">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>PLC进度</span>
          </div>
          <el-steps :space="200" :active="active" finish-status="success">
            <el-step title="启动"></el-step>
            <el-step title="取货完成"></el-step>
            <el-step title="放货完成"></el-step>
          </el-steps>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>当前状态</span>
          </div>
          <el-tag style="margin: 12px 0;">{{stackerTaskMoveStatus}}</el-tag>
        </el-card>
      </el-col>

    </el-row>
    <el-card style="min-height: 200px;">
      <div v-for="(item,index) in shelveVOS" :key="item.shelveCode" :label="item.shelveName" :name="item.shelveCode">
        <el-tag>货架名称:{{item.shelveName}}</el-tag>
        <table>
          <thead>
            <tr>
              <th>
                <div class="out">
                  <b>列</b>
                  <em>层</em>
                </div>
              </th>
              <th v-for="(rowth,index1) in item.shelveWidthVOS" :key="index1" class="column-th">{{item.shelveWidthVOS.length-index1}}</th>
            </tr>
          </thead>
          <tbody class="layui-tab">
            <tr v-for="(columnth,rindex) in item.shelveWidthVOS[index].stockVOS" :key="rindex">
              <th class="layer-th">{{item.shelveWidthVOS[index].stockVOS.length-rindex}}</th>
              <td class="member" v-for="(columntd,dindex) in item.shelveWidthVOS" :key="dindex" :data-id="index+'-'+(item.shelveWidthVOS[index].stockVOS.length-rindex-1)+'-'+(item.shelveWidthVOS.length-dindex-1)"
                draggable="true" @dragstart="onDragstart($event)" @dragend="onDragend($event)" @dragover="onDragover($event)"
                @drop="onDrop($event)" :class="[columntd.stockVOS[rindex].freezeStatus=='冻结'?'outdNo':columntd.stockVOS[rindex].stockStatus=='空闲'?'itemtd': columntd.stockVOS[rindex].stockStatus=='入库中'? 'intd': columntd.stockVOS[rindex].stockStatus=='已绑定'? 'support': 'used']">
                {{columntd.stockVOS[rindex].stockId}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Stock',
    data() {
      return {
        activeName: '0',
        active: 0,
        stackerTaskMoveStatus: '未执行',
        startExchangeIndex: '',
        endExchangeIndex: '',
        startRLenght: '',
        endRLenght: '',
        startDLenght: '',
        endDLenght: '',
        itemtd: 'itemtd',
        used: 'used',
        support: 'support',
        outd: 'outd',
        outdNo: 'outdNo',
        notnull: 'notnull',
        visible: false,
        showSupport: false,
        shelveVOS: [],
        tableReqForm: {
          pageNum: 1,
          pageSize: 10
        },
        changeFreezeForm: {
          stockId: '',
          freezeStatus: ''
        },
        stockFrom: {
          oldStockId: 0,
          newStockId: 0
        },
        moveCodeFrom: {
          stackerTaskMoveCode: ''
        },
        loading: true,
        setInterval: ''
      }
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.label
      },
      async getShelveList() {
        const res = await this.$apiUtil.postByJson('shelve/getShelveList', this.tableReqForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.shelveVOS = res.data.shelveVOS
        for (let i = 0; i < this.shelveVOS.length; i++) {
          for (let j = 0; j < this.shelveVOS[i].shelveWidthVOS.length; j++) {
            this.shelveVOS[i].shelveWidthVOS[j].stockVOS.reverse()
          }
        }
        if (this.activeName === '0') {
          this.activeName = res.data.shelveVOS[0].shelveCode
        }
        this.showSupport = this.isSupport(this.shelveVOS) // 判断状态是否在
        if (!this.showSupport) {
          window.localStorage.removeItem('stackerTaskMoveCode')
        } else {
          this.findByStackerTaskMoveCode()
        }
        this.loading = false
      },
      async moveStockPosition() {
        const res = await this.$apiUtil.postByJson('pushOrderDetail/moveStockPosition', this.stockFrom)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        window.localStorage.setItem('stackerTaskMoveCode', res.data.stackerTaskMoveCode)
        // console.log(window.localStorage.getItem('stackerTaskMoveCode'))

        clearInterval(this.setInterval)
        const _this = this
        _this.setInterval = setInterval(function() {
          _this.findByStackerTaskMoveCode()
        }, 5000)
        // this.showSupport = true
        // 移库成功后刷新数据
        this.getShelveList()
      },
      async findByStackerTaskMoveCode() {
        // console.log('===========', window.localStorage.getItem('stackerTaskMoveCode'))
        if (window.localStorage.getItem('stackerTaskMoveCode')) {
          this.moveCodeFrom.stackerTaskMoveCode = window.localStorage.getItem('stackerTaskMoveCode')
          const res = await this.$apiUtil.postByForm('stackerTaskMove/findByStackerTaskMoveCode ', this.moveCodeFrom)
          // console.log(res)
          if (res.code !== '200') {
            return this.$message.error(res.msg)
          }
          this.stackerTaskMoveStatus = res.data.stackerTaskMoveStatus
          if (res.data.stackerTaskMovePace === '') {
            this.active = 0
          }

          if (res.data.stackerTaskMovePace === '取货') {
            this.active = 1
          }

          if (res.data.stackerTaskMovePace === '放货') {
            this.active = 2
            // window.localStorage.removeItem('stackerTaskMoveCode')
            this.getShelveList()
          }
        } else {
          clearInterval(this.setInterval)
        }
      },
      async changeFreezeStatus(stockId, freezeStatus) {
        this.changeFreezeForm.stockId = stockId
        if (freezeStatus === '冻结') {
          this.changeFreezeForm.freezeStatus = '正常'
        } else {
          this.changeFreezeForm.freezeStatus = '冻结'
        }
        const res = await this.$apiUtil.postByJson('shelve/changeFreezeStatus', this.changeFreezeForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.getShelveList()
      },
      onDragstart(event) {
        // event.target 都返回源元素
        console.log(event.target.getAttribute('class'))
        this.startExchangeIndex = event.target.getAttribute('data-id')
        this.startRLenght = this.shelveVOS[this.startExchangeIndex.split('-')[0]].shelveWidthVOS[0].stockVOS.length
        this.startDLenght = this.shelveVOS[this.startExchangeIndex.split('-')[0]].shelveWidthVOS.length
        console.log(this.startRLenght, this.startDLenght)
        console.log('拖拽开始')
      },
      onDragend(event) {
        // console.log(event.target.getAttribute('class'))
        // console.log()
        if (event.target.getAttribute('class').indexOf('used') !== -1) {
          // console.log(event)
          // console.log('下标' + this.startExchangeIndex + ' 和 ' + this.endExchangeIndex + '进行替换')
          // R位=当前R位长度减云移动后D位减1
          // D位=当前D位长度减云移动后R位减1
          const startRLIndex = parseInt(this.startExchangeIndex.split('-')[0]) // RL位
          const startRIndex = parseInt(this.startExchangeIndex.split('-')[1]) // R位
          const startDIndex = parseInt(this.startExchangeIndex.split('-')[2]) // D位
          const endRLIndex = parseInt(this.endExchangeIndex.split('-')[0]) // RL位
          const endRIndex = parseInt(this.endExchangeIndex.split('-')[1]) // R位
          const endDIndex = parseInt(this.endExchangeIndex.split('-')[2]) // D位

          const sEndDIndex = this.startRLenght - startRIndex - 1
          const sEndRIndex = this.startDLenght - startDIndex - 1
          const eEndDIndex = this.endRLenght - endRIndex - 1
          const eEndRIndex = this.endDLenght - endDIndex - 1
          const _stockId = this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockId
          const _stockStatus = this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockStatus
          const _freezeStatus = this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].freezeStatus
          if (_freezeStatus === '冻结') {
            this.$notify({
              title: '警告',
              message: '目标货位被冻结,请重新选择位置！',
              type: 'warning'
            })
            return
          }
          if (_stockStatus === '已存放') {
            this.$notify({
              title: '警告',
              message: '目标货位不为空,请重新选择位置！',
              type: 'warning'
            })
            return
          }
          if (this.isSupport(this.shelveVOS)) {
            this.$notify({
              title: '警告',
              message: '有进行中任务，货位不能移动',
              type: 'warning'
            })
            return
          }
          this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockId = this.shelveVOS[
            startRLIndex].shelveWidthVOS[sEndRIndex].stockVOS[sEndDIndex].stockId
          // this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockStatus = this.shelveVOS[
          //   startRLIndex].shelveWidthVOS[sEndRIndex].stockVOS[sEndDIndex].stockStatus
          this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockStatus = _stockStatus
          // console.log(this.shelveVOS[startRLIndex].shelveWidthVOS[sEndRIndex].stockVOS[sEndDIndex].stockStatus)
          this.shelveVOS[startRLIndex].shelveWidthVOS[sEndRIndex].stockVOS[sEndDIndex].stockId = _stockId
          this.shelveVOS[startRLIndex].shelveWidthVOS[sEndRIndex].stockVOS[sEndDIndex].stockStatus = _stockStatus
          this.stockFrom.oldStockId = this.shelveVOS[endRLIndex].shelveWidthVOS[eEndRIndex].stockVOS[eEndDIndex].stockId
          this.stockFrom.newStockId = _stockId
          this.moveStockPosition()
          console.log('拖拽结束')
        } else {
          if (event.target.getAttribute('class').indexOf('outdNo') !== -1) {
            this.$notify({
              title: '警告',
              message: '被冻结货位不能移动',
              type: 'warning'
            })
          }
          if (event.target.getAttribute('class').indexOf('support') !== -1) {
            this.$notify({
              title: '警告',
              message: '被绑定货位不能移动',
              type: 'warning'
            })
          } else {
            this.$notify({
              title: '警告',
              message: '空货位不能移动',
              type: 'warning'
            })
          }
        }
      },
      onDrop(event) {
        // event.target 都返回目标元素
        if (event.target.className.indexOf('member') !== -1) {
          this.endExchangeIndex = event.target.getAttribute('data-id')
        } else {
          this.endExchangeIndex = event.target.parentElement.getAttribute('data-id')
        }
        this.endRLenght = this.shelveVOS[this.endExchangeIndex.split('-')[0]].shelveWidthVOS[0].stockVOS.length
        this.endDLenght = this.shelveVOS[this.endExchangeIndex.split('-')[0]].shelveWidthVOS.length
      },
      onDragover(event) {
        // 阻止元素的默认行为，不然ondrop不管用
        event.preventDefault()
      },
      isSupport(data) {
        if (data.length === 0) {
          return
        }
        let isNoSupport = false
        for (let i = 0; i < data.length; i++) {
          const shelveWidthVOS = data[i].shelveWidthVOS
          if (shelveWidthVOS.length > 0) {
            for (let j = 0; j < shelveWidthVOS.length; j++) {
              const stockVOS = shelveWidthVOS[j].stockVOS
              if (stockVOS.length > 0) {
                for (let k = 0; k < stockVOS.length; k++) {
                  if (stockVOS[k].stockStatus === '已绑定') {
                    isNoSupport = true
                  }
                }
              }
            }
          }
          return isNoSupport
        }
      }
    },
    created() {
      var _this = this
      _this.getShelveList()
      if (window.localStorage.getItem('stackerTaskMoveCode')) {
        _this.setInterval = setInterval(function() {
          _this.findByStackerTaskMoveCode()
        }, 5000)
      }
    },
    destroyed() {
      clearInterval(this.setInterval)
    }
  }
</script>

<style lang="less" scoped>
  .out {
    border-top: 50px #c0c0c085 solid;
    border-left: 50px #80808069 solid;
    position: relative;
    color: #000000;

    b {
      font-style: normal;
      display: block;
      position: absolute;
      top: -46px;
      left: -21px;
      width: 50px;
    }

    em {
      font-style: normal;
      display: block;
      position: absolute;
      top: -22px;
      left: -43px;
      width: 50px;
    }
  }

  table th {
    width: 65px;
    height: 40px;
  }

  td {
    cursor: pointer;
  }

  .column-th {
    background: #c0c0c085;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    text-align: center;
    padding: 5px 2px;
    border-color: white;
  }

  .layer-th {
    background: #80808069;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    text-align: center;
    border-color: white;
  }

  .used {
    background: #FFFF00;
  }

  .outd {
    background: #6d85fb;
  }
 .intd {
    background: #38fff9;
  }
  .support {
    background: #02A7F0;
  }

  .outdNo {
    background: #777888;
  }

  .itemtd {
    background: #80ff80;
    height: 25px;
    padding: 2px;
  }

  .notnull {
    background: #FF7575;
  }

  .layui-tab {
    td {
      border: 1px solid navy;
      height: 35px;
      border-color: white;
    }
  }

  .text {
    font-size: 16px;
  }

  .el-card__body {
    padding: 5px;
    width: 100% !important;
  }
</style>
